<template>
  <div>
    <!-- 推荐歌单 -->
    <div class="recommend_top">推荐歌单</div>
    <van-row gutter="20">
      <van-col span="8" v-for="item in recommendList" :key="item.id">
        <van-image
          width="100%"
          height="100"
          fit="cover"
          :src="item.picUrl"
        />
        <p class="recommend_title">{{ item.name }}</p>
      </van-col>
    </van-row>

    <!-- 最新音乐 -->
    <div class="recommend_top">最新音乐</div>
    <van-cell-group>
      <van-cell
        @click="$router.push({
          path: `/comment?id=${item.id}`
        })" 
        v-for="item in latestMusic" 
        :key="item.id" 
        :title="item.name" 
        :label="item.song.album.artists[0].name" 
        center
        >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon @click="play(item.id)"  name="play-circle-o" class="search-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getRecommendList, getLatestMusic } from '@/api/home.js'
export default {
  name: "Home",
  data() {
    return {
      // 获取多少条推荐歌单数据
      recommendNum: 6,
      // 推荐歌单数据
      recommendList: [],
      // 最新歌单
      latestMusic: []
    };
  },
  created() {
    this.loadRecommendList()
    this.loadLatestMusic()
  },
  methods: {
    async loadRecommendList() {
      const { data } = await getRecommendList(this.recommendNum)
      // 获取成功
      if (data.code === 200) {
        this.recommendList = data.result
      } else {
        console.log('获取数据失败！')
      }
    },
    async loadLatestMusic() {
      const { data } = await getLatestMusic(50)
      if (data.code === 200) {
        this.latestMusic = data.result
      } else {
        console.log('获取最新歌单数据失败！')
      }
    },
    play(id) {
      console.log('id: ',id)
      console.log(this.$route)
      this.$router.push({
        path: `/play?id=${id}`,
      })
    }
  }
};
</script>

<style lang="less" scoped>
.recommend_title{
  margin-bottom: 5px;
  font-size:14px;
  overflow: hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight:900;
  text-align:center;
}
.recommend_top{
	width:100%;
	height:25px;
	font-size:0.45rem;
  display: flex;
  align-items: center;
  line-height:25px;
  margin: 5px 0px;
  color:#fff;
  background-color: #ff5050;
}
.recommend_top::before{
	content:"";
	height:25px;
	width:5px;
	background-color: #000;
	margin-right:0.2rem;
}
.van-cell__title {
  span {
    font-size: 18px;
    font-weight: 700;
  }
}
.search-icon {
  font-size: 30px;
  line-height: inherit;
}
</style>